<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Multiple Files Upload with Transparent Overlay Button</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Multiple Files Upload with Transparent Overlay Button</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>In this example, the Uploader is used to send multiple images or videos (filtered by file extension) to the server and monitor
   their upload progress with individual progress bars. The example also demonstrates the use of the transparent overlay "Browse" button for the Uploader.</p>
   
<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there.</p>
<p><strong>Also note:</strong> The uploader is not supported on iOS devices (iPhone and iPad), because Flash player is not available on that system. This example will not function on such devices.</p>
</div>

<div class="example yui3-skin-sam">
    <style type="text/css">

.progressbars {
	width:300px;
}

.yui3-progressbar {
	margin-bottom:3px;
	border: 2px solid #c4c4c4;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
}
.yui3-progressbar .yui3-progressbar-content {
	background-color:#fff;
	position:relative;
/*	width: 200px; */
}
.yui3-progressbar .yui3-progressbar-label {
	position: absolute;
	top:1px;
	left:3px;
	font-size:11px;
	font-family:Arial,Helvetica,sans-serif;
}
.yui3-progressbar .yui3-progressbar-slider {
	background-color:#e0bb30;
	height: 15px;
	line-height: 29px;
	width: 0;
}

#selectFilesLink #selectLink,
#uploadFilesLink #uploadLink {
    color: #00c;
    text-decoration: underline;
}
</style>

<div id="uploaderContainer"> 
	<div id="uploaderOverlay" style="position:absolute; z-index:2"></div> 
	<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div> 
</div> 
<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>

<div id="files">
  <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
    <thead>
	   <tr><th>Filename</th><th>File size</th><th>Percent uploaded</th></tr>
	</thead>
	<tbody>
	</tbody>
  </table>	
</div>

<script>

YUI({filter:"raw", gallery: 'gallery-2011.02.09-21-32'}).use("uploader", 'gallery-progress-bar', function(Y) {
	
var uploader,
    selectedFiles = {};

function init () {
var overlayRegion = Y.one("#selectLink").get('region');
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);


 
var swfURL = ../../build/uploader/assets/uploader.swf; 


if (Y.UA.ie >= 6) {
	swfURL += "?t=" + Y.guid();
}

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay", 
                           swfURL: swfURL});	

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
}

Y.on("domready", init);


function setupUploader (event) {
	uploader.set("multiFiles", true);
	uploader.set("simLimit", 3);
	uploader.set("log", true);
	
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
	
    uploader.set("fileFilters", fileFilters); 
}

function fileSelect (event) {
	var fileData = event.fileList;	
    
	for (var key in fileData) {
	        if (!selectedFiles[fileData[key].id]) {
			   var output = "<tr><td>" + fileData[key].name + "</td><td>" + 
			                fileData[key].size + "</td><td><div id='div_" + 
			                fileData[key].id + "' class='progressbars'></div></td></tr>";
			   Y.one("#filenames tbody").append(output);
			  
			   var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
			       progressBar.render("#div_" + fileData[key].id);
			       progressBar.set("progress", 0);
               
               selectedFiles[fileData[key].id] = true;
			}
	}

}

function updateProgress (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
}

function uploadComplete (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", 100);
}

function uploadFiles (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}

Y.one("#uploadFilesLink").on("click", uploadFiles);

});

</script>
</div>

<h2>Setting up Uploader UI</h2>
<p>In this example, the UI for the Uploader consists of two links, as well as containers for displaying various information about the upload process. Since the Uploader uses Flash, which requires direct user input to show the "Browse" dialog, the "Select Files" link cannot be directly used to invoke that dialog. Instead, create a container that overlays this link (<code>uploaderOverlay</code>): the instance of Flash player will be placed in that container and made full transparent, thus accepting user input but providing the visual information from the link below it. In addition, create a table for holding the list of selected files (<code>filenames</code>):</p>

<pre class="code prettyprint">&lt;div id=&quot;uploaderContainer&quot;&gt; 
	&lt;div id=&quot;uploaderOverlay&quot; style=&quot;position:absolute; z-index:2&quot;&gt;&lt;&#x2F;div&gt; 
	&lt;div id=&quot;selectFilesLink&quot; style=&quot;z-index:1&quot;&gt;
	   &lt;a id=&quot;selectLink&quot; href=&quot;#&quot;&gt;Select Files&lt;&#x2F;a&gt;
	&lt;&#x2F;div&gt; 
&lt;&#x2F;div&gt; 
&lt;div id=&quot;uploadFilesLink&quot;&gt;
   &lt;a id=&quot;uploadLink&quot; href=&quot;#&quot;&gt;Upload Files&lt;&#x2F;a&gt;
&lt;&#x2F;div&gt;

&lt;div id=&quot;files&quot;&gt;
  &lt;table id=&quot;filenames&quot; style=&quot;border-width:1px; border-style:solid; padding:5px;&quot;&gt;
	&lt;tr&gt;&lt;td&gt;Filename&lt;&#x2F;td&gt;&lt;td&gt;File size&lt;&#x2F;td&gt;&lt;td&gt;Percent uploaded&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
  &lt;&#x2F;table&gt;	
&lt;&#x2F;div&gt;</pre>


<h2>Creating a YUI Instance</h2>
<p>Now that the UI containers and controls are in place, create a YUI instance. Since this example uses the <a href="http://yuilibrary.com/gallery/show/progress-bar">Progress-bar</a> module from <a href="http://www.yuilibrary.com/gallery">YUI Gallery</a> (built by <a href="http://github.com/apipkin/">Anthony Pipkin</a>), we also include the gallery config option among the YUI() arguments, as well as <code>gallery-progressbar</code> in the <code>use</code> statement: </p>

<pre class="code prettyprint">YUI({
  gallery: &#x27;gallery-2011.02.09-21-32&#x27;
   }).use(&quot;uploader&quot;, 
          &quot;gallery-progress-bar&quot;, 
          function(Y) {
				&#x2F;&#x2F; Y is the YUI instance.
				&#x2F;&#x2F; The rest of the code in this tutorial is encapsulated 
				&#x2F;&#x2F; in this anonymous function.
		  });</pre>


<h2>Working around the IE Caching Bug</h2>
<p>Due to a bug in IE6 through IE8, when a SWF is loaded from local cache (after a page has been reloaded, for example), it's unable to properly communicate with the JavaScript VM. For that reason, specifically for IE,
we can prevent loading the SWF from cache by appending a random get variable to the SWF URL:</p>

<pre class="code prettyprint">var swfURL = Y.Env.cdn + &quot;uploader&#x2F;assets&#x2F;uploader.swf&quot;;

if (Y.UA.ie &gt;= 6) {
    swfURL += &quot;?t=&quot; + Y.guid();
}</pre>


<h2>Instantiate the Uploader</h2>
<p>Next, create an instance of the Uploader. Make sure to include the custom swfURL we constructed as part of the workaround above. Since the Uploader is being placed in a relatively-sized container, subscribe to the <code>domready</code> event and instantiate the uploader in its handler. After instantiating it, add handlers to the uploader events. In addition, create a variable to store selected files, to be used later, in the <code>fileSelect</code> handler:</p>
	
<pre class="code prettyprint">var uploader,
    selectedFiles = {};
Y.on(&quot;domready&quot;, init);

function init () {
	
var overlayRegion = Y.one(&quot;#selectLink&quot;).get(&#x27;region&#x27;);
Y.log(overlayRegion);
Y.one(&quot;#uploaderOverlay&quot;).set(&quot;offsetWidth&quot;, overlayRegion.width);
Y.one(&quot;#uploaderOverlay&quot;).set(&quot;offsetHeight&quot;, overlayRegion.height);

uploader = new Y.Uploader({boundingBox:&quot;#uploaderOverlay&quot;, swfURL: swfURL});	

uploader.on(&quot;uploaderReady&quot;, setupUploader);
uploader.on(&quot;fileselect&quot;, fileSelect);
uploader.on(&quot;uploadprogress&quot;, updateProgress);
uploader.on(&quot;uploadcomplete&quot;, uploadComplete);

Y.one(&quot;#uploadFilesLink&quot;).on(&quot;click&quot;, uploadFile);
}</pre>



<h2>Configure the Uploader</h2>
<p>Once the uploader is ready, the <code>setupUploader</code> function is called, and Uploader configuration can be set. For this example, set the <code>multiFiles</code> property to <code>true</code>, allowing the user to select multiple files. Also set the <code>simLimit</code> property to 3, indicating that three files can be uploaded simultaneously. We also set the <code>log</code> property (which allows to see debug output from Flash, only available if running the Flash Debug player), and the <code>fileFilters</code> property, which filters the user's "Browse" dialog to only include files with certain extensions: </p>
	
<pre class="code prettyprint">function setupUploader (event) {
	uploader.set(&quot;multiFiles&quot;, true);
	uploader.set(&quot;simLimit&quot;, 3);
	uploader.set(&quot;log&quot;, true);
	
	var fileFilters = new Array({description:&quot;Images&quot;, extensions:&quot;*.jpg;*.png;*.gif&quot;},
	                   {description:&quot;Videos&quot;, extensions:&quot;*.avi;*.mov;*.mpg&quot;}); 
	
    uploader.set(&quot;fileFilters&quot;, fileFilters); 
}</pre>


<h2><code>fileselect</code> Event Handler</h2>
<p>When the user selects files to be uploaded, display the list of selected files in a table. Populate the table with data from the event payload, and reserve a column to display a progress bar for each individual file. Set the initial value of the progress bars to 0, and provide them with custom <code>id</code>s, so they can be easily updated when upload progress information becomes available. Since the event payload always carries the total list of selected files, keep track of which files have already been selected, so that they don't get displayed in the table twice:</p>

<pre class="code prettyprint">function fileSelect (event) {
	var fileData = event.fileList;	
    
	for (var key in fileData) {
	        if (!selectedFiles[fileData[key].id]) {
			   var output = &quot;&lt;tr&gt;&lt;td&gt;&quot; + fileData[key].name + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&quot; + 
			                fileData[key].size + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&lt;div id=&#x27;div_&quot; + 
			                fileData[key].id + &quot;&#x27; class=&#x27;progressbars&#x27;&gt;&lt;&#x2F;div&gt;&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;&quot;;
			   Y.one(&quot;#filenames tbody&quot;).append(output);
			  
			   var progressBar = new Y.ProgressBar({id:&quot;pb_&quot; + fileData[key].id, 
			                                        layout : &#x27;&lt;div class=&quot;{labelClass}&quot;&gt;&lt;&#x2F;div&gt;&#x27; + 
			                                                 &#x27;&lt;div class=&quot;{sliderClass}&quot;&gt;&lt;&#x2F;div&gt;&#x27;});
			       progressBar.render(&quot;#div_&quot; + fileData[key].id);
			       progressBar.set(&quot;progress&quot;, 0);
               
               selectedFiles[fileData[key].id] = true;
			}
	}

}</pre>


<h3><code>uploadprogress</code> Event Handler</h3>
<p>When <code>uploadprogress</code> events arrive, update relevant progress bars with the current progress information (note that the event payload contains the id of the file for which the upload progress information is being made available):</p>

<pre class="code prettyprint">function updateProgress (event) {
	var pb = Y.Widget.getByNode(&quot;#pb_&quot; + event.id);
	pb.set(&quot;progress&quot;, 
	       Math.round(100 * event.bytesLoaded &#x2F; event.bytesTotal));
}</pre>


<h2>Other Event Handlers</h2>
<p>Once the upload completes, make sure that the specific progress bar has reached 100 percent. Also include the handler for the <code>click</code> event on the upload button, which kicks off the upload process (since the <code>uploadAll()</code> method is being used, the queue will be managed automatically):</p>
	
<pre class="code prettyprint">function uploadComplete (event) {
	var pb = Y.Widget.getByNode(&quot;#pb_&quot; + event.id);
	pb.set(&quot;progress&quot;, 100);
}

function uploadFile (event) {
	uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload_simple.php&quot;);
}</pre>


<h2>Full Source Code For this Example</h2>

<pre class="code prettyprint">&lt;style type=&quot;text&#x2F;css&quot;&gt;

.progressbars {
	width:300px;
}

.yui3-progressbar {
	margin-bottom:3px;
	border: 2px solid #c4c4c4;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
}
.yui3-progressbar .yui3-progressbar-content {
	background-color:#fff;
	position:relative;
&#x2F;*	width: 200px; *&#x2F;
}
.yui3-progressbar .yui3-progressbar-label {
	position: absolute;
	top:1px;
	left:3px;
	font-size:11px;
	font-family:Arial,Helvetica,sans-serif;
}
.yui3-progressbar .yui3-progressbar-slider {
	background-color:#e0bb30;
	height: 15px;
	line-height: 29px;
	width: 0;
}

#selectFilesLink #selectLink,
#uploadFilesLink #uploadLink {
    color: #00c;
    text-decoration: underline;
}
&lt;&#x2F;style&gt;

&lt;div id=&quot;uploaderContainer&quot;&gt; 
	&lt;div id=&quot;uploaderOverlay&quot; style=&quot;position:absolute; z-index:2&quot;&gt;&lt;&#x2F;div&gt; 
	&lt;div id=&quot;selectFilesLink&quot; style=&quot;z-index:1&quot;&gt;&lt;a id=&quot;selectLink&quot; href=&quot;#&quot;&gt;Select Files&lt;&#x2F;a&gt;&lt;&#x2F;div&gt; 
&lt;&#x2F;div&gt; 
&lt;div id=&quot;uploadFilesLink&quot;&gt;&lt;a id=&quot;uploadLink&quot; href=&quot;#&quot;&gt;Upload Files&lt;&#x2F;a&gt;&lt;&#x2F;div&gt;

&lt;div id=&quot;files&quot;&gt;
  &lt;table id=&quot;filenames&quot; style=&quot;border-width:1px; border-style:solid; padding:5px;&quot;&gt;
    &lt;thead&gt;
	   &lt;tr&gt;&lt;th&gt;Filename&lt;&#x2F;th&gt;&lt;th&gt;File size&lt;&#x2F;th&gt;&lt;th&gt;Percent uploaded&lt;&#x2F;th&gt;&lt;&#x2F;tr&gt;
	&lt;&#x2F;thead&gt;
	&lt;tbody&gt;
	&lt;&#x2F;tbody&gt;
  &lt;&#x2F;table&gt;	
&lt;&#x2F;div&gt;

&lt;script&gt;

YUI({filter:&quot;raw&quot;, gallery: &#x27;gallery-2011.02.09-21-32&#x27;}).use(&quot;uploader&quot;, &#x27;gallery-progress-bar&#x27;, function(Y) {
	
var uploader,
    selectedFiles = {};

function init () {
var overlayRegion = Y.one(&quot;#selectLink&quot;).get(&#x27;region&#x27;);
Y.one(&quot;#uploaderOverlay&quot;).set(&quot;offsetWidth&quot;, overlayRegion.width);
Y.one(&quot;#uploaderOverlay&quot;).set(&quot;offsetHeight&quot;, overlayRegion.height);


 
var swfURL = ..&#x2F;..&#x2F;build&#x2F;uploader&#x2F;assets&#x2F;uploader.swf; 


if (Y.UA.ie &gt;= 6) {
	swfURL += &quot;?t=&quot; + Y.guid();
}

uploader = new Y.Uploader({boundingBox:&quot;#uploaderOverlay&quot;, 
                           swfURL: swfURL});	

uploader.on(&quot;uploaderReady&quot;, setupUploader);
uploader.on(&quot;fileselect&quot;, fileSelect);
uploader.on(&quot;uploadprogress&quot;, updateProgress);
uploader.on(&quot;uploadcomplete&quot;, uploadComplete);
}

Y.on(&quot;domready&quot;, init);


function setupUploader (event) {
	uploader.set(&quot;multiFiles&quot;, true);
	uploader.set(&quot;simLimit&quot;, 3);
	uploader.set(&quot;log&quot;, true);
	
	var fileFilters = new Array({description:&quot;Images&quot;, extensions:&quot;*.jpg;*.png;*.gif&quot;},
	                   {description:&quot;Videos&quot;, extensions:&quot;*.avi;*.mov;*.mpg&quot;}); 
	
    uploader.set(&quot;fileFilters&quot;, fileFilters); 
}

function fileSelect (event) {
	var fileData = event.fileList;	
    
	for (var key in fileData) {
	        if (!selectedFiles[fileData[key].id]) {
			   var output = &quot;&lt;tr&gt;&lt;td&gt;&quot; + fileData[key].name + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&quot; + 
			                fileData[key].size + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&lt;div id=&#x27;div_&quot; + 
			                fileData[key].id + &quot;&#x27; class=&#x27;progressbars&#x27;&gt;&lt;&#x2F;div&gt;&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;&quot;;
			   Y.one(&quot;#filenames tbody&quot;).append(output);
			  
			   var progressBar = new Y.ProgressBar({id:&quot;pb_&quot; + fileData[key].id, layout : &#x27;&lt;div class=&quot;{labelClass}&quot;&gt;&lt;&#x2F;div&gt;&lt;div class=&quot;{sliderClass}&quot;&gt;&lt;&#x2F;div&gt;&#x27;});
			       progressBar.render(&quot;#div_&quot; + fileData[key].id);
			       progressBar.set(&quot;progress&quot;, 0);
               
               selectedFiles[fileData[key].id] = true;
			}
	}

}

function updateProgress (event) {
	var pb = Y.Widget.getByNode(&quot;#pb_&quot; + event.id);
	pb.set(&quot;progress&quot;, Math.round(100 * event.bytesLoaded &#x2F; event.bytesTotal));
}

function uploadComplete (event) {
	var pb = Y.Widget.getByNode(&quot;#pb_&quot; + event.id);
	pb.set(&quot;progress&quot;, 100);
}

function uploadFiles (event) {
	uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload_simple.php&quot;);
}

Y.one(&quot;#uploadFilesLink&quot;).on(&quot;click&quot;, uploadFiles);

});

&lt;&#x2F;script&gt;</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to upload a single file, while tracking progress and using a sprite-skinned button">
                                        <a href="uploader-simple.html">Simple Uploader with Progress Tracking</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to upload a single file, along with GET and POST Vars Submission and receive data from the server">
                                        <a href="uploader-withvars.html">Single File Upload with Additional Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to upload multiple files with progress tracking and a transparent overlay upload button">
                                        <a href="uploader-multiple.html">Multiple Files Upload with Transparent Overlay Button</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
